<template>
  <div class="home-container">
    <div class="main-content">
      <!-- 热门话题区域 -->
      <div class="hot-topics">
        <div class="section-title">
          <i class="el-icon-price-tag"></i>
          <span>近期热门话题</span>
        </div>
        <div class="topics-grid">
          <div v-for="(topic, index) in hotTopics" :key="index" class="topic-card"
               @click="handleTopicClick(topic)">
            <div class="topic-icon" :style="{ backgroundColor: topic.bgColor }">
              <i :class="topic.icon"></i>
              <img v-if="topic.overlayIcon" :src="topic.overlayIcon" class="icon-overlay-small" />
            </div>
            <div class="topic-text">{{ topic.text }}</div>
          </div>
        </div>
      </div>

      <!-- 输入框区域 -->
      <div class="input-section">
        <div class="input-wrapper">
          <div class="input-container">
            <div class="input-field">
              <i class="el-icon-search search-icon"></i>
              <el-input
                  type="text"
                  placeholder="Ask questions, or type ? for commands"
                  v-model="userInput"
                  @keyup.enter="sendMessage"
                  class="main-input"
              >
              </el-input>
              <i class="el-icon-microphone voice-icon"></i>
            </div>
            <div class="send-button" @click="sendMessage">
              <i class="el-icon-position"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import peoplesIcon from '@/assets/icons/svg/peoples.svg'
import shoppingIcon from '@/assets/icons/svg/shopping.svg'
import druidIcon from '@/assets/icons/svg/druid.svg'
import bugIcon from '@/assets/icons/svg/bug.svg'
import sunnyIcon from '@/assets/icons/svg/sunny.svg'
import dashboardIcon from '@/assets/icons/svg/dashboard.svg'

export default {
    name: 'Home',
    data () {
        return {
            searchQuery: '',
            userInput: '',
            hotTopics: [
              { icon: 'el-icon-user', text: '农民人数上升的趋势分析', bgColor: '#E6EFFF', overlayIcon: peoplesIcon },
              { icon: 'el-icon-shopping-bag', text: '新型收割机', bgColor: '#FFF3E6', overlayIcon: shoppingIcon },
              { icon: 'el-icon-data-line', text: '水稻价格趋势', bgColor: '#FFE6E6', overlayIcon: druidIcon },
              { icon: 'el-icon-warning', text: '小麦的病虫害预防', bgColor: '#E6FFF6', overlayIcon: bugIcon },
              { icon: 'el-icon-cloudy', text: '农作物气候影响分析', bgColor: '#F2E6FF', overlayIcon: sunnyIcon },
              { icon: 'el-icon-monitor', text: '智能农业设备管理', bgColor: '#E6FFFD', overlayIcon: dashboardIcon }
            ]
        }
    },
    methods: {
        sendMessage () {
            if (!this.userInput.trim()) return;
            this.$router.push({
                path: '/chat',
                query: { question: this.userInput }
            });
        },
        handleTopicClick (topic) {
            this.$router.push({
                path: '/chat',
                query: { question: topic.text }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.home-container {
    min-height: 100vh;
    background-color: #ffffff;
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

    .nav-right {
        display: flex;
        align-items: center;
        gap: 20px;

        .search-input {
            width: 300px;
        }

        .notification-badge {
            font-size: 20px;
            cursor: pointer;
        }
    }
}

.main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.hot-topics {
    margin: 80px auto 40px;
    text-align: center;
    width: 100%;

    .section-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-bottom: 60px;
        font-size: 32px;
        font-weight: bold;

        i {
            color: #FF6B00;
            font-size: 36px;
        }
    }

    .topics-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .topic-card {
        cursor: pointer;
        transition: all 0.3s ease;
        background-color: white;
        border-radius: 12px;
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 15px;
        border: 1px solid #EAEAEA;
        height: 100%;

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

      .topic-icon {
        position: relative;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden; // 防止内容溢出

        i {
          font-size: 28px;
          color: #333;
          z-index: 1;
          position: relative;
        }

        .icon-overlay-small {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 18px;
          height: 18px;
          z-index: 2;
          border-radius: 50%;
          background: #fff;
          box-shadow: 0 1px 4px rgba(0,0,0,0.08);
          object-fit: contain;
          pointer-events: none;
        }

      }



      .topic-text {
            flex-grow: 1;
            font-size: 16px;
            color: #333;
            font-weight: 500;
            text-align: left;
            line-height: 1.4;
        }
    }
}

@media screen and (max-width: 1200px) {
    .topics-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
    }
}

@media screen and (max-width: 768px) {
    .topics-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

.input-section {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 20px 80px;
    margin-top: 20px;
    width: 100%;

    .input-wrapper {
        position: relative;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 28px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        padding: 8px;

        .input-container {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .input-field {
            position: relative;
            flex: 1;

            .search-icon,
            .voice-icon {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                font-size: 20px;
                color: #999;
                z-index: 2;
            }

            .search-icon {
                left: 20px;
            }

            .voice-icon {
                right: 15px;
                cursor: pointer;
            }
        }

        .send-button {
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            border-radius: 22px;
            background-color: #409EFF;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;

            i {
                color: white;
                font-size: 20px;
            }

            &:hover {
                background-color: #66b1ff;
                transform: scale(1.05);
            }
        }

        .main-input {
            width: 100%;

            :deep(.el-input__inner) {
                height: 44px;
                padding: 0 50px;
                font-size: 16px;
                border-radius: 22px;
                border: 1px solid #EAEAEA;
                background-color: #F8F9FA;
                transition: all 0.3s ease;

                &:focus {
                    border-color: #409EFF;
                    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
                    background-color: #fff;
                }
            }
        }
    }
}
</style>